<template>
  <s-page custom-class="Dialog-Page">
    <c-demo-block>
      <view class="btn-list">
        <s-button block @click="showDialog">弹出</s-button>
        <s-button block @click="noTitleDialog">不带title</s-button>
        <s-button block @click="noCancelDialog">不带取消按钮</s-button>
        <s-button block @click="showMoreTextDialog">多文字</s-button>
        <s-button block @click="toastDialog">配合toast使用</s-button>
        <s-button block @click="htmlDialog">自定义html内容</s-button>
      </view>
    </c-demo-block>
  </s-page>
</template>

<script>
import Dialog from '@/uni_modules/s-ui/utils/dialog';
import Toast from '@/uni_modules/s-ui/utils/toast';

export default {
  data: () => ({}),
  computed: {},
  methods: {
    showDialog() {
      Dialog({
        title: '提示',
        message: '这是一个模态弹窗',
      }).then(
        () => {
          Toast('用户点击确定');
        },
        () => {
          Toast('用户点击取消');
        },
      );
    },
    noTitleDialog() {
      Dialog({
        message: '这是一个模态弹窗',
      }).then(
        () => { },
        () => { },
      );
    },
    noCancelDialog() {
      Dialog({
        title: '提示',
        message: '这是一个模态弹窗',
        showCancel: false,
      }).then(
        () => { },
        () => { },
      );
    },
    showMoreTextDialog() {
      Dialog({
        title: '提示',
        message: '我与父亲不相见已二年余了，我最不能忘记的是他的背影。',
      }).then(
        () => { },
        () => { },
      );
    },
    toastDialog() {
      Dialog({
        title: '提示',
        message: '您确定删除吗？',
      }).then(
        () => {
          Toast.success('删除成功');
        },
        () => { },
      );
    },
    htmlDialog() {
      Dialog({
        title: '提示',
        messageStyle: 'display:block;text-align:left',
        message: `
        <div>
          <div>1.内容内容内容内容内。</div>
          <div>2.内容内容内容内容内容内。</div>
          <div>3.内容内容内容内容内容内容内。</div>
        </div>
        `,
      }).then(() => { }, () => { });
    },
  },
};
</script>

<style lang="scss">
.Dialog-Page {
  padding: 0 $padding-md;
  .btn-list {
    ::v-deep {
      .s-button {
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>
